<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/goodsType'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="商品分类名称：">
                        <el-input style="width:250px" v-model="paging.title"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset(1)" >重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <div class="title-left"> 分类列表 </div>
                    <el-button @click="isAdd=true" class="left-auto" type="primary">新增</el-button>
                </div>
                <!-- <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column prop="username" label="编号" > </el-table-column>
                    <el-table-column prop="code" label="商品品类名称" > </el-table-column>
                    <el-table-column fixed="right" width="160" label="操作">
                        <template slot-scope="scope">
                            <span @click="setRow(1,scope.row)" class="tab-table-text">编辑</span>
                            <span @click="setRow(2,scope.row)" class="tab-red-text">删除</span>
                        </template>
                    </el-table-column>
                </el-table> -->
                <div v-loading="loading" class="custom-tree-container min-400">
                    <el-tree
                    :data="tableData"
                    show-checkbox
                    node-key="id"
                    :props="{label:'title',children:'child',}"
                    default-expand-all
                    :expand-on-click-node="false"
                    :render-content="renderContent">
                    </el-tree>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog 
        width="600px"
        :close-on-click-modal="false"
        :before-close="handleClose"
        :title="form.id?'修改分类':'添加分类'" 
        :visible.sync="isAdd">
            <el-form :model="form" :rules="rules" ref="form" label-width="80px">
              <el-form-item prop="title" label="分类名称">
                <el-input v-model="form.title" placeholder=""></el-input>
              </el-form-item>
              <!-- <el-form-item prop="fu" label="父级分类">
                  <el-cascader
                    style="width:100%"
                    v-model="form.pid"
                    :options="tableData"
                    :props="{emitPath:false, checkStrictly: true ,label:'title',children:'child',value:'id',expandTrigger: 'hover'}"
                    clearable></el-cascader>
              </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="subitm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isAdd: false,
            dialogVisible: false,
            paging: {
                title: '',//姓名
                page: 1,
                total: 0,
                limit: 99999,
            },
            rules:{
                title:{ required: true, message: '请输入分类名称', trigger: 'blur' },
            },
            form: {
                id:undefined,
                title: "",
                pid:'',
            },
            tableData: []
        };
    },
    created() {
        if (this.$route.path == '/goodsType') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        append(data,type){//添加
            // console.log(data);
            if(type==2){
                // this.form.id = data.id;
                // this.form.pid = data.pid;
                this.form = {
                    id:data.id,
                    title:  data.title,
                    pid: data.pid,
                }
            }else{
                this.form.pid = data.id;
            }
            this.isAdd = true;
        },
        remove(row){//删除
            this.$msgbox({
                title: '提示',
                message: '确定要删除该商品分类吗?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose:async (action, instance, done) => {
                    if (action === 'confirm') {
                    instance.confirmButtonLoading = true;
                    instance.confirmButtonText = '执行中...';
                    let {code,data} = await this.$Http.delGoodsType({id:row.id})
                        if(code){
                            this.$message.success('删除成功!');
                            this.handleCurrentChange(1)
                        }
                        done();
                        instance.confirmButtonLoading = false;
                    } else {
                        done();
                    }
                }
            }).then(action => {

            }).catch(()=>{});
        },
        subitm(){
            this.$refs['form'].validate(async (valid) => {
                if (!valid)return;
                console.log(this.form,'this.form');
                let obj = this.form;
                if(!obj.pid)obj.pid=0;
                let {code} = await this.$Http.setGoodsCategory(obj);
                if(code){
                    this.$message.success(this.form.id?'修改成功':'添加成功')
                    this.handleCurrentChange(1);
                    this.handleClose()
                }
            });
        },
        renderContent(h, { node, data, store }) {
            // <el-button size="mini" on-click={ () => this.append(data) }>添加</el-button>
            return (
            <div class="custom-tree-node">
                <span>{node.label}</span>
                <span>
                    <el-button size="mini" type="primary" on-click={ () => this.append(data,2) }>修改</el-button>
                    <el-button size="mini" type="danger" on-click={ () => this.remove( data) }>删除</el-button>
                </span>
            </div>);
        },
        async setRow(type, row) {
            this.isInfo = true;
            return;
            if (type == 1) {
                this.dialogVisible = true;
                setTimeout(() => {
                    this.ruleForm = Object.assign({}, row);
                }, 200);
            } else if (type == 2) {
                this.isInfo = true;
                this.loading2 = true;
                let { code, data } = await this.$Http.catdistribution({
                    id: row.id
                })
                this.loading2 = false;
                if (code) {
                    this.recordList = data;
                } else this.recordList = [];
            }
        },
        handleClose(dom) {
            this.form = this.$options.data().form;
            this.$refs['form'].resetFields();
            this.isAdd = false;
            dom && dom();
        },
        async repairGetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getGoodsCategory(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            // this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
::v-deep{
    .el-tree-node__content{
        height: 40px;
    }
}
</style>